<template>
      <div class='deviceContainer'>
          <div class='tab-wrap'>
            <div class='navbar'><mp-navbar :tabs="tabs" :activeIndex='activeIndex' @tabClick="tabClick"></mp-navbar></div>
            <div>
              <img src='/static/images/nav_scan_blue_b@3x.png' class='header-icon' v-if='type==1'  @click.stop='scanCode'/>
              <img src='/static/images/nav_screen@3x.png' class='header-icon' @click.stop='showModal'/>
            </div>
          </div>
          <div class='device-wrap'>
            <scroll-view  style="height:100%" :scroll-y="true">
              <div v-for='(item,index) in dataList' :key='item.id+index'>
                  <div class='level1'>
                    <div class='label-line' :class='{active:level1Id==item.id}'  @click.stop='changeLevel1(item.id,item.deviceIds)'>
                      <div>{{item.name}}</div>
                      <div>
                        <i-icon type="unfold" size='20' color='#d9dde0' v-if='level1Id==item.id' />
                        <i-icon type="enter"  size='20' color='#d9dde0' v-else/>
                      </div>
                    </div>
                    <div v-if='level1Id==item.id'>
                      <div v-if='type==2 && activeIndex==1'>
                           <div class='info-line' v-for='(device,index3) in deviceList' :key='device.id+index3'  @click.stop='changeDevice(device.deviceId)'>
                              <div>
                                <img :src="imgHost+device.deviceImage" class='device-img' v-if='device.deviceImage' />
                                <img src='/static/images/thumb_default.png' class='device-img' v-else />
                              </div>
                              <div class="info-part">
                                <div class='device-title'>{{device.deviceNum}}</div>
                                <div>品牌：{{device.deviceBrand}}</div>
                                <div>型号：{{device.deviceModel}}</div>
                                <div>描述： {{device.deviceDesc}}</div>
                              </div>
                            </div>
                            <div class='info-line more'>
                                <div v-if='page<=totalPage' @click='loadMore'>加载更多</div> 
                                <div v-else>没有更多了</div> 
                            </div>
                      </div>
                      <div v-else>
                        <div class='level2' v-for='(subsystem,index2) in item.list' :key='subsystem.id+index2'>
                          <div class='label-line' :class='{active:level2Id==subsystem.id}'  @click.stop='changeLevel2(subsystem.id)'>
                            <div>{{subsystem.name}}</div>
                            <div>
                              <i-icon type="unfold" size='20' color='#d9dde0' v-if='level2Id==subsystem.id' />
                              <i-icon type="enter"  size='20' color='#d9dde0' v-else/>
                            </div>
                          </div>
                          <div v-if='level2Id==subsystem.id'>
                            <div class='info-line' v-for='(device,index3) in deviceList' :key='device.id+index3'  @click.stop='changeDevice(device.deviceId)'>
                              <div>
                                <img :src="imgHost+device.deviceImage" class='device-img' v-if='device.deviceImage' />
                                <img src='/static/images/thumb_default.png' class='device-img' v-else />
                              </div>
                              <div class="info-part">
                                <div class='device-title'>{{device.deviceNum}}</div>
                                <div>品牌：{{device.deviceBrand}}</div>
                                <div>型号：{{device.deviceModel}}</div>
                                <div>描述： {{device.deviceDesc}}</div>
                              </div>
                            </div>
                            <div class='info-line more'>
                                <div v-if='page<=totalPage' @click='loadMore'>加载更多</div> 
                                <div v-else>没有更多了</div> 
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </scroll-view>
          </div>
          <i-drawer mode="right" :visible="modalShow" mask-closable="false">
            <view class="modal-container">
                <div class='select-title'>项目</div>
                <div class='select-wrap'>
                  <scroll-view style='height:100%;' :scroll-y="true">
                    <radio-group  @change="handleChange">
                        <label  v-for="(item,index) in projectList" :key="index">
                          <div class='radio-line'>
                              <div class='radio-wrap'>
                                <image src='/static/images/icon_confirm@3x.png' v-if='selectId==item.id'/>
                                <image src='/static/images/icon_unconfirm.png' v-else/>
                                <input type="radio" name="list" :value="item.id" :checked="selectId==item.id" class='radio'>
                              </div>
                              <div>{{item.name}}</div>
                          </div>
                        </label>
                    </radio-group>
                  </scroll-view>
                </div>
                <i-row>
                  <i-col span="12" i-class="col-class">
                    <i-button @click="close" type="error" i-class='btn-small red' size='small' shape="circle">关闭</i-button>
                  </i-col>
                  <i-col span="12" i-class="col-class">
                    <i-button @click="sure" type="primary" i-class='btn-small blue' size='small' shape="circle">确定</i-button>
                  </i-col>
                </i-row>    
            </view>
        </i-drawer>
      </div>
</template>

<script type="text/javascript">
import mpNavbar from 'mpvue-weui/src/navbar';
import { mapState } from 'vuex';
export default { 
  data() {
    return {
      type:1,//1设备2实时工况
      tabs:[],
      page:1,
      totalPage:1,
      activeIndex:0,
      scrollTop : 0,
      modalShow:false,
      projectList: [],
      projectId:null,
      projectSelect:null,
      systemId:null,
      selectId:null,
      subsystemId:null,
      deviceId:null,
      buildingId:null,
      level1Id:null,
      level2Id:null,
      floorId:null,
      systemList:[],
      buildingList:[],
      deviceList:[],
      dataList:[],
      id:0,
    }
  },
  components: {
    mpNavbar
  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
  },
  computed:{
    ...mapState(['userInfo','imgHost']),
  },
  beforeMount(){
    var query = this.$root.$mp.query;
    this.type = query.type;
    if(query.type==1){
      this.tabs = ['按系统','按空间']
      wx.setNavigationBarTitle({
        title: '设备' 
      })
    }else if(query.type==2){
      this.tabs = ['按系统','按设备组'];
      wx.setNavigationBarTitle({
        title: '实时工况' 
      })
    }
    this.findProject();
  },
  methods:{
      tabClick(index){
        this.activeIndex = index;
        this.dataList = index ? this.buildingList : this.systemList;
      },
      changeLevel1(id,deviceIds){
        if(this.activeIndex){
          if(this.buildingId == id){
            this.buildingId = null;
          }else{
            this.buildingId = id;
          }
          this.level1Id = this.buildingId;
          this.floorId = null;
          if(this.type==2){
            this.findRealTimeDevice(deviceIds)
          }
        }else{
          if(this.systemId == id){
            this.systemId = null;
          }else{
            this.systemId = id;
          }
          this.level1Id = this.systemId;
          this.subsystemId = null;
        }
      },
      changeLevel2(id){
        this.page = 1;
        this.totalPage = 1;
        this.id = 0;
        if(this.activeIndex){
          if(this.floorId == id){
            this.floorId = null;
          }else{
            this.floorId = id;
            this.deviceList = [];
            this.findDevice();
          }
          this.level2Id = this.floorId;
        }else{
          if(this.subsystemId == id){
            this.subsystemId = null;
          }else{
            this.subsystemId = id;
            this.deviceList = [];
            this.findDevice();
          }
          this.level2Id = this.subsystemId;
        }
        
      },
      loadMore(){
        if(this.type==1){
          if(this.page<=this.totalPage){
              this.findDevice()
          }
        }else if(this.type==2){
          this.id = this.deviceList[this.deviceList.length-1].id;
          this.findDevice()
        }
        
      },
      changeDevice(deviceId){
        this.deviceId = deviceId;
        wx.navigateTo({
            url:`/pages/device_detail/main?accountId=${this.deviceId}&type=${this.type}`
        })
      },
      scanCode(){
        var that = this;
        wx.scanCode({
          success(res){
            if(res.errMsg=='scanCode:ok'){
              var params = JSON.parse(res.result);
              that.changeDevice(params.id)
            }
          }
        })
      },
      findSystemBuilding(){
        //根据项目ID获取系统列表和建筑列表
        this.$http.post({
          url:'/project/getProjectStructure',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
          }
        }).then((res)=>{
            if(res.s==0){
                this.systemList = res.i.Data.systemList;
                if(this.type==1) this.buildingList = res.i.Data.buildingList;
                this.dataList = this.activeIndex ?  this.buildingList : this.systemList;
                this.deviceList = [];
                this.subsystemId = null;
                this.systemId = null;
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      findRealTimeGroup(){
        //实时工况-设备组
        this.$http.post({
          url:'/alarm/getDeviceGroup',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
          }
        }).then((res)=>{
            if(res.s==0){
                this.buildingList = res.i.Data;
                this.dataList = this.activeIndex ?  this.buildingList : this.systemList;
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      findRealTimeSystem(){
        //实时工况-系统组
        this.$http.post({
          url:'/alarm/getSynchronizedSys',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
          }
        }).then((res)=>{
            if(res.s==0){
              this.systemList = res.i.Data;
              this.dataList = this.activeIndex ?  this.buildingList : this.systemList;
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      findRealTimeDevice(deviceIds){
        this.$http.post({
          url:'/alarm/getSmartDevices',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
              deviceIds,
          }
        }).then((res)=>{
            if(res.s==0){
              this.deviceList = res.i.Data
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      findDevice(){
        var url;
        var data = {
          ukey:this.userInfo.ukey,
          projectId:this.projectId,
          systemId:'',
          deviceTypeId:'',
        };
        if(this.type==1){
          url = '/project/getDevicesByPage';
          data.floorId = '';
          data.buildingId = '';
          data.page = this.page++
        }else if(this.type==2){
          url = '/alarm/getSynchronizedDevice';
          data.size = 10;
          data.id = this.id;
        }
        if(this.activeIndex){
            if(this.type==1){
              data.floorId = this.floorId;
              data.buildingId = this.buildingId;
            }else if(this.type==2){

            }
        }else{
          data.systemId = this.systemId;
          data.deviceTypeId = this.subsystemId;
        }
        this.$http.post({
          url,
          data
        }).then(res=>{
          if(res.s==0){
            if(this.type==1){
              this.deviceList = this.deviceList.concat(res.i.Data.deviceList);
              this.totalPage = res.i.Data.totalPage;
            }else if(this.type==2){
              this.deviceList = this.deviceList.concat(res.i.Data);
            }
          }
        }).catch(e=>{
          console.log('请求失败',e)
        })
      },
      findProject(){
        //项目建筑
        this.$http.post({
            url:'/project/getBuildings',
            data:{
                ukey:this.userInfo.ukey,
                userId:this.userInfo.userId,
            }
          }).then((res)=>{
              if(res.s==0){
                  this.projectList = res.i.Data;
                  this.projectSelect = this.projectList[0];
                  this.selectId = this.projectSelect.id;
                  this.projectId = this.selectId;                  
                  if(this.type==1){
                    this.findSystemBuilding()
                  }else if(this.type==2){
                    this.findRealTimeSystem()
                    this.findRealTimeGroup()
                  }
              }
          }).catch((e)=>{
              console.log('请求失败',e)
          })
      },
      showModal(){
        this.selectId = this.projectId;
        this.modalShow = true;
      },
      close(){
        this.modalShow = false;
      },
      sure(){
        this.projectId = this.selectId;
        this.close()
        if(this.type==1){
          this.findSystemBuilding()
        }else if(this.type==2){
          this.findRealTimeSystem()
          this.findRealTimeGroup()
        }
      },
      handleChange(el) {
        this.selectId = el.mp.detail.value;
      }
  }
}
</script>

<style lang='less'>
    page{
        background:#eef7fd;
        height:100%;
    }
    ::-webkit-scrollbar{
        width: 0;
        height: 0;
        color: transparent;
    }
    .weui-navbar{
      z-index:1;
    }
    .weui-navbar-slider-on{
      background-color: #1d7ebf!important;
    }
    .weui-navbar__item{
      padding: 20rpx 0!important;
      color:#7b7b7b;
      &.weui-bar__item_on{
        color: #1d7ebf!important;
      }
    }
    .weui-tab{
      border-bottom:none!important;
      background: #fff!important;
    }
    .deviceContainer{
      height:100%;
      display: flex;
      flex-direction: column;
      .tab-wrap{
        background: #fff;
        display: flex;
        align-items: center;
        .navbar{
          flex:1;
        }
        .header-icon{
          width: 40rpx;
          height: 40rpx;
          margin:0 16rpx; 
        }
      }

      .device-wrap{
        flex:1;
        height: 50rpx;
        border: 1px solid #e8eae9;
        border-radius: 8rpx;
        margin: 30rpx;
        background: #fff;
        .label-line{
          display: flex;
          justify-content: space-between;
          color:#b1b1b1;
          border-bottom: 1px solid #dfe3e5;
          padding:0 20rpx;
          height: 70rpx;
          line-height: 70rpx;
          &.active{
            color: #4192c1;
          }
        }
        .level1{
          font-size: 30rpx;
          .level2{
            font-size:28rpx;
            background: #f7fbfe;
            .label-line{
               padding-left:30rpx;
            }
          }
        }
        .info-line{
          display: flex;
          align-items: center;
          border-bottom: 1px solid #dfe3e5;
          background: #fff;
          transition:all 1s;
          .device-img{
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            margin: 30rpx;
          }
          .info-part{
            flex:1;
            font-size:26rpx;
            color:#b1b1b1;
            line-height: 46rpx;
            .device-title{
              color:#000;
              font-size:28rpx;
            }
          }
          &.more{
            color: #b1b1b1;
            font-size:28rpx;
            line-height: 60rpx;
            div{
              width: 100%;
              text-align: center
            }
          }
        }
      }

      .modal-container{
        background: #fff;
        width:60vw;
        height: 94vh;
        display: flex;
        flex-direction: column;
        z-index:9;
        .btn-small{
          font-size:32rpx;
          height: 60rpx;
          line-height: 60rpx;
          &.red{
            background:#fe5c57!important;
          }
          &.blue{
            background:#1182d2!important;
          }
        }
        .select-title{
          background: #1380d3;
          color: #fff;
          font-size:32rpx;
          height: 100rpx;
          line-height: 100rpx;
          padding-left:20rpx;
        }
        .select-wrap{
          flex:1;
          height: 50rpx;
        }
        .radio-line{
          height: 70rpx;
          line-height: 70rpx;
          padding: 0 20rpx;
          color:#83878a;
          font-size: 30rpx;
          display: flex;
          .radio-wrap{
            width: 60rpx;
            height: 60rpx;
            position: relative;
            image{
              position: absolute;
              left: 12rpx;
              top: 16rpx;
              width: 36rpx;
              height: 36rpx;
              z-index: 1;
            }
            .radio{
              position:absolute;
              left: 0;
              top: 0;
              z-index: 2;
              opacity: 0;
            }
          }
        }
      }
    }
</style>
